<template>
  <div
    class="paitent-card"
    v-if="childType != '2'"
    :class="[
      childType == '0' ? '' : 'girl-paitent',
      boyStatus ? 'boy-active' : '',
      girlStatus ? 'girl-active' : '',
    ]"
    @mouseenter="isActive(true)"
    @mouseleave="isActive(false)"
  >
    <!-- <div class="paitent-card-bg"> -->
    <div class="paitent-card-left">
      <img :src="childType == '0' ? boyDefaultIcon : girlDefaultIcon" />
    </div>
    <div class="paitent-card-right">
      <div class="card-right-title">
        <div class="card-right-title-left">
          <div class="card-name astrict-width">{{ patientData.realName }}</div>
          <div class="card-right-day">{{ patientData.age }}天</div>
        </div>
        <div class="card-right-id astrict-width">{{ patientData.code }}</div>
      </div>
      <div class="card-right-detail line-text--three">
        家族遗传史：{{
          patientData.familyHistory ? patientData.familyHistory : "无"
        }}&nbsp;&nbsp;&nbsp;&nbsp; 地区：{{
          patientData.address.length ? patientData.address : "无"
        }}
        <br />
        初筛：{{ patientData.result ? patientData.result : "无" }}
      </div>
      <div class="check-result-btns patient">
        <div
          class="btn"
          :class="[
            deleteStatus ? 'btn-back1' : 'btn-bg1',
            deleteStatus ? 're-btn-back' : '',
          ]"
          @click="goSeeUser(patientData.customerId)"
        >
          查看
        </div>
        <div
          class="btn"
          :class="[deleteStatus ? 'btn-bg1' : 'btn-back1']"
          @mouseenter="deleteActive(true)"
          @mouseleave="deleteActive(false)"
          @click="centerDialogVisible = true"
        >
          删除
        </div>
      </div>
    </div>

    <!-- 确认删除弹框 -->
    <div class="patient-dialog">
      <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%">
        <span>确认要删除吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="remove">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>

  <!-- 未填性别 -->
  <div
    class="paitent-card baby-paitent"
    v-else
    :class="[babyStatus ? 'baby-active' : '']"
    @mouseenter="isBabyActive(true)"
    @mouseleave="isBabyActive(false)"
  >
    <!-- <div class="paitent-card-bg"> -->
    <div class="paitent-card-left">
      <img :src="babyDefaultIcon" />
    </div>
    <div class="paitent-card-right">
      <div class="card-right-title">
        <div class="card-right-title-left">
          <div class="card-name astrict-width">
            {{ patientData.realName ? patientData.realName : "--" }}
          </div>
          <div class="card-right-day">
            {{ patientData.age ? patientData.age : " --" }}天
          </div>
        </div>
        <div class="card-right-id astrict-width">{{ patientData.code }}</div>
      </div>
      <div class="card-right-detail line-text--three">
        家族遗传史：{{
          patientData.familyHistory ? patientData.familyHistory : "无"
        }}&nbsp;&nbsp;&nbsp;&nbsp; 地区：{{
          patientData.address.length ? patientData.address : "无"
        }}
        <br />
        初筛：{{ patientData.result ? patientData.result : "无" }}
      </div>
      <div class="check-result-btns patient">
        <div
          class="btn"
          :class="[
            deleteStatus ? 'btn-back1' : 'btn-bg1',
            deleteStatus ? 're-btn-back' : '',
          ]"
          @click="goSeeUser(patientData.customerId)"
        >
          查看
        </div>
        <div
          class="btn"
          :class="[deleteStatus ? 'btn-bg1' : 'btn-back1']"
          @mouseenter="deleteActive(true)"
          @mouseleave="deleteActive(false)"
          @click="centerDialogVisible = true"
        >
          删除
        </div>
      </div>
    </div>

    <!-- 确认删除弹框 -->
    <div class="patient-dialog">
      <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%">
        <span>确认要删除吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="remove">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { remove } from "@/api/customer";
import { Message } from "element-ui";

export default {
  props: ["childType", "patientData", "getPatientList"],
  data() {
    return {
      centerDialogVisible: false, //确认删除弹框
      boyIcon: {
        hover: require("@/assets/images/boy-icon-hover.png"),
        default: require("@/assets/images/boy-icon.png"),
      },
      girlIcon: {
        hover: require("@/assets/images/girl-icon-hover.png"),
        default: require("@/assets/images/girl-icon.png"),
      },
      babyIcon: {
        hover: require("@/assets/images/baby-icon-hover.png"),
        default: require("@/assets/images/baby-icon.png"),
      },

      boyStatus: false,
      girlStatus: false,
      babyStatus: false,
      boyDefaultIcon: "",
      girlDefaultIcon: "",
      babyDefaultIcon: "",
      deleteStatus: false,
    };
  },
  mounted() {
    this.boyDefaultIcon = this.boyIcon.default;
    this.girlDefaultIcon = this.girlIcon.default;
    this.babyDefaultIcon = this.babyIcon.default;
  },
  methods: {
    isActive(hoverStatus) {
      if (this.childType == "0") {
        this.boyStatus = !this.boyStatus;
        hoverStatus
          ? (this.boyDefaultIcon = this.boyIcon.hover)
          : (this.boyDefaultIcon = this.boyIcon.default);
      } else {
        this.girlStatus = !this.girlStatus;
        hoverStatus
          ? (this.girlDefaultIcon = this.girlIcon.hover)
          : (this.girlDefaultIcon = this.girlIcon.default);
      }
    },

    isBabyActive(hoverStatus) {
      this.babyStatus = !this.babyStatus;
      hoverStatus
        ? (this.babyDefaultIcon = this.babyIcon.hover)
        : (this.babyDefaultIcon = this.babyIcon.default);
    },

    /**
     * 删除移入移出样式
     */
    deleteActive(seeStatus) {
      this.deleteStatus = !this.deleteStatus;
    },

    /**
     * 删除患者信息
     */

    async remove() {
      console.log(this.patientData.customerId);
      const res = await remove(this.patientData.customerId);
      console.log("删除结果", res);
      if (res.code != 200) return;
      Message.success("删除成功！");
      this.$emit("getPatientList", false, true);
      this.centerDialogVisible = false;
    },

    /**
     * 跳转查看患者信息
     */
    goSeeUser(customerId) {
      this.$router.push({
        path: "/dashboard/seeuser",
        query: {
          customerId,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.astrict-width {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.re-btn-back {
  margin: 0 20px 0 0 !important;
}

.paitent-card {
  flex: none;
  height: 200px;
  width: 500px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #ffffff;
  display: flex;
  padding: 35px 0 35px 30px;
  background: url("../../../assets/images/boy-bg.png") no-repeat;
  background-size: 100% 100%;
  margin: 0 20px 30px 0;

  & > * {
    flex: none;
  }

  .paitent-card-left {
    width: 70px;
    height: 70px;
    background-color: #8775ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
  }

  .paitent-card-right {
    height: fit-content;
    flex-grow: 1;

    .card-right-title {
      display: flex;
      font-size: 18px;
      color: #3c3978;
      font-weight: bold;
      justify-content: space-between;
      margin-bottom: 13px;
      align-items: center;

      .card-right-title-left {
        display: flex;

        .card-right-day {
          margin: 0 0 0 20px;
          width: 60px;
          height: 18px;
          font-size: 12px;
          color: #8775ff;
          line-height: 18px;
          text-align: center;
          background-color: #ffffff;
          border-radius: 9px;
          border: solid 1px #8775ff;
        }
      }

      .card-right-id {
        font-size: 14px;
        padding: 5px;
        flex-shrink: 0;
        color: #ffffff;
        // width: 80px;
        // height: 23px;
        // line-height: 23px;
        text-align: center;
        background-color: #b7acff;
        border-radius: 4px 0px 0px 4px;
        font-weight: normal;
      }
    }

    .card-right-detail {
      font-size: 14px;
      width: 350px;
      line-height: 20px;
      color: #999999;
      height: 60px;
      margin-bottom: 10px;
    }

    .patient {
      width: fit-content;
      background: transparent;
      padding: 0 0 43px 0;
    }
  }
}

.girl-paitent {
  background: url("../../../assets/images/girl-bg.png") no-repeat;
  background-size: 100% 100%;

  .paitent-card-left {
    background-color: #e984ca;
  }

  .paitent-card-right {
    .card-right-title {
      align-items: center;

      .card-right-title-left {
        .card-right-id {
          background-color: #f3b1df;
          color: #fff;
        }

        .card-right-day {
          border: solid 1px #e984ca;
          color: #e984ca;
        }
      }

      .card-right-id {
        background: #e984ca;
        color: #fff;
      }
    }

    .patient {
      .btn-bg1 {
        background-color: #e984ca;
      }

      .btn-back1 {
        color: #e984ca;
        border: solid 1px #e984ca;
      }
    }
  }
}

.baby-paitent {
  .paitent-card-left {
    background-color: #5e5baf;
  }

  .paitent-card-right {
    .card-right-title {
      align-items: center;

      .card-right-title-left {
        .card-right-id {
          background-color: #5e5baf;
          color: #fff;
        }

        .card-right-day {
          border: solid 1px #5e5baf;
          color: #5e5baf;
        }
      }

      .card-right-id {
        background: #5e5baf;
        color: #fff;
      }
    }

    .patient {
      .btn-bg1 {
        background-color: #5e5baf;
      }

      .btn-back1 {
        color: #5e5baf;
        border: solid 1px #5e5baf;
      }
    }
  }
}

.boy-active {
  background: url("../../../assets/images/boy-bg-hover.png") no-repeat;
  background-size: 100% 100%;

  .paitent-card-left {
    background: #fff;
  }

  .paitent-card-right {
    color: #fff;

    .card-right-title {
      color: #fff;
      border: none;

      .card-right-title-left {
        .card-right-day {
          border: solid 1px #ffffff;
          background-color: #8775ff;
          color: #fff;
        }
      }

      .card-right-id {
        background-image: linear-gradient(#eef1fb, #eef1fb),
          linear-gradient(#b7acff, #b7acff);
        color: #8775ff;
      }
    }

    .card-right-detail {
      color: #fff;
    }

    .patient {
      .btn-bg1 {
        background: #fff;
        border: 1px solid #fff;
        color: #8775ff;
      }

      .btn-back1 {
        background-color: #8775ff;
        border: 1px solid #fff;

        color: #ffffff;
      }
    }
  }
}

.girl-active {
  background: url("../../../assets/images/girl-bg-hover.png") no-repeat;
  background-size: 100% 100%;

  .paitent-card-left {
    background: #fff;
  }

  .paitent-card-right {
    color: #fff;

    .card-right-title {
      color: #fff;
      border: none;

      .card-right-title-left {
        .card-right-day {
          border: solid 1px #ffffff;
          background-color: #e984ca;
          color: #fff;
        }
      }

      .card-right-id {
        background-image: linear-gradient(#eef1fb, #eef1fb),
          linear-gradient(#f3b1df, #f3b1df);
        color: #e984ca;
      }
    }

    .card-right-detail {
      color: #fff;
    }

    .patient {
      .btn-bg1 {
        background: #fff;
        border: 1px solid #fff;
        color: #e984ca;
      }

      .btn-back1 {
        background-color: #e984ca;
        border: 1px solid #fff;

        color: #ffffff;
      }
    }
  }
}

.baby-active {
  background: url("../../../assets/images/baby-bg-hover.png") no-repeat;
  background-size: 100% 100%;

  .paitent-card-left {
    background: #fff;
  }

  .paitent-card-right {
    color: #fff;

    .card-right-title {
      color: #fff;
      border: none;

      .card-right-title-left {
        .card-right-day {
          border: solid 1px #ffffff;
          background-color: #5e5baf;
          color: #fff;
        }
      }

      .card-right-id {
        background-color: #9693e7;
        color: #fff;
      }
    }

    .card-right-detail {
      color: #fff;
    }

    .patient {
      .btn-bg1 {
        background: #fff;
        border: 1px solid #fff;
        color: #5e5baf;
      }

      .btn-back1 {
        background-color: #5e5baf;
        border: 1px solid #fff;
        color: #ffffff;
      }
    }
  }
}
</style>
